<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>

          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/order_question" style="color: #409eff;">订单处理</router-link>>
            订单详情
          </div>

          <div class="hei10"></div>
                <div class="title">订单详情</div>
                <div class="con" v-loading="loading">
                    <div class="flex">
                        <div class="idnum">订单ID：{{all.id}}</div><div class="outnum">外部订单编号：{{all.source_id}}</div>

                    </div>
                    <div class="flex">
                        <div class="dtime">用户下单时间：{{all.ordered_at}}</div>
                        <div class="dtime">平台创建时间：{{all.created_at}}</div>
                        <div class="dtime">状态变更时间：{{all.updated_at}}</div>
                    </div>
                    <div class="flexx">
                        <el-form label-width="100px" @submit.native.prevent>
                            <div class="flex2">
                                <!-- <el-form-item label="订单来源：" class="detail">{{all.source}}</el-form-item> -->
                                <el-form-item label="收货人：" class="detail">{{all.address_name}}</el-form-item>
								 <el-form-item label="上游订单号：" class="detail">{{all.upstream_order_id}}</el-form-item>
                            </div>
                            <div class="flex2">
                                <el-form-item label="分销商：" class="detail">{{all.merchant_name}}</el-form-item>
                                <el-form-item label="联系电话：" class="detail">{{all.address_mobile}}</el-form-item>
                            </div>
                            <div class="flex2">
                                <el-form-item label="订单状态：" class="detail">{{all.status_name}}</el-form-item>
                                <el-form-item label="收货地址：" class="detail">{{all.address_province}}{{all.address_city}}{{all.address_district}}{{all.town}}{{all.address}}</el-form-item>
                            </div>
                            <div class="flex2">
                                <el-form-item label="退款状态：" class="detail">{{all.refund_status}}</el-form-item>
                                <el-form-item label="证件姓名：" class="detail">{{all.id_card_name}}
                                <span style="margin-left:20px; color:#409eff; cursor:pointer;" @click="seephoto(all.id_card_num,all.id)">查看照片</span>
                                <span style="color:#409eff;margin-left:20px; cursor: pointer;" @click="jiemi">查看完整信息</span>
                                </el-form-item>

                            </div>
                            <div class="flex2">
                                <el-form-item label="上游状态：" class="detail">{{all.up_status}}</el-form-item>
                                <el-form-item label="证件号码：" class="detail"> {{all.id_card_num}}</el-form-item>

                            </div>
                            <div class="flex2">


                            </div>
                        </el-form>
                    </div>
                    <div class="memtitle mt20">商品信息</div>
                    <div class="borx">
                        <div class="flex2">
                            <!-- <div class="shop1 shop01">产品渠道</div>
                            <div class="shop2 shop02">产品渠道编码</div> -->
                            <div class="shop1 shop01" style="flex-grow: 1;">商品名称</div>
                            <div class="shop2 shop02">商品编码</div>
                            <div class="shop3">归属地</div>
                            <div class="shop4">购买号码</div>
                            <div class="shop03 shopb" >购买数量</div>
                        </div>
                        <div class="flex2" style="color: #727272;">
                            <!-- <div class="shop1 shop01">{{all.supplier_product_name}}</div>
                            <div class="shop2 shop02">{{all.supplier_product_sku}}</div> -->
                            <div class="shop1 shop01" style="flex-grow: 1;">{{all.product_sku}}</div>
                            <div class="shop2 shop02">{{all.source_sku}}</div>
                            <div class="shop3">{{all.region_p}}{{all.region_c}}</div>
                            <div class="shop4">{{all.plan_mobile}}</div>
                            <div class="shop03 shopb" >{{all.amount}}</div>
                        </div>

                    </div>
                    <div class="memtitle mt20">备注信息</div>
                    <div class="borx">
                        <div class="flex2">
                            <div class="shop6">买家备注</div>
                            <div class="shop7">卖家备注</div>
                            <div class="shop8">生产备注（失败原因）</div>
                        </div>
                        <div class="flex2" style="color: #727272;">
                            <div class="shop6">{{all.buyer_memo}}</div>
                            <div class="shop7">{{all.memo}}</div>
                            <div class="shop8">{{all.reason}}</div>
                        </div>
                    </div>
                    <div class="memtitle mt20">发货&激活信息</div>
                    <div class="borx">
                        <div class="flex2">
                            <div class="shop3">物流公司</div>
                            <div class="shop3">物流单号</div>
                            <div class="shop41">生产号码</div>
                            <div class="shop3">ICCID</div>
                            <div class="shop5">激活状态</div>
                            <div class="shop4 shop05">激活时间</div>
                            <div class="shop5">充值状态</div>
                            <div class="shop42 shop05">充值时间</div>
                        </div>
                        <div class="flex2" style="color: #727272;">
                            <div class="shop3">{{all.tracking_company}}</div>
                            <div class="shop3">{{all.tracking_number}}</div>
                            <div class="shop41">{{all.plan_mobile_produced}}</div>
                            <div class="shop3">{{all.iccid}}</div>
                            <div class="shop5">{{all.active_status != '激活且充值'?all.active_status:'已激活'}}</div>
                            <div class="shop4 shop05">{{all.activated_at}}</div>
                            <div class="shop5">{{all.active_status == '激活且充值'?'已充值':'无'}}</div>
                            <div class="shop42 shop05">{{all.recharged_at}}</div>
                        </div>

                    </div>

                    <div class="memtitle mt20">投放信息
                      <span v-if="all.promotion.status==0" style="background: #409eff; font-size: 12px; color: #fff; padding: 5px 10px; border-radius: 2px; margin-left: 20px;">未投放</span>
                      <span v-if="all.promotion.status==1" style="background: #2974FF; font-size: 12px; color: #fff; padding: 5px 10px; border-radius: 2px; margin-left: 20px;">已投放</span>
                    </div>
                    <div class="borx">
                        <div class="flex2">
                            <div class="shop3">项目ID</div>
                            <div class="shop3">广告ID</div>
                            <div class="shop41">用户点击ID</div>
                            <div class="shop3">计划ID</div>
                            <div class="shop5">媒体位ID</div>
                            <div class="shop4 shop05">广告账户ID</div>
                            <div class="shop5">广告投放位置</div>
                            <div class="shop42 shop05">操作平台系统</div>
                        </div>
                        <div class="flex2" style="color: #727272;">
                            <div class="shop3">{{all.promotion.projectid}}</div>
                            <div class="shop3">{{all.promotion.promotionid}}</div>
                            <div class="shop41">{{all.promotion.clickid}}</div>
                            <div class="shop3">{{all.promotion.aid}}</div>
                            <div class="shop5">{{all.promotion.unionsite}}</div>
                            <div class="shop4 shop05">{{all.promotion.advertiserid}}</div>
                            <div class="shop5">{{all.promotion.csite}}</div>
                            <div class="shop42 shop05">{{all.promotion.os}}</div>
                        </div>

                    </div>


                    <div class="mem">
                        <div class="memtitle">操作记录：</div>
                        <div class="memlist">
                            <div v-for="item in seller_memolist">
                                {{item}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog title="重新上传照片" :visible.sync="seephotolog" :close-on-click-modal="false" width="1254px">
                    <div v-loading="seephotoloading">
                        <div class="logflex">
                            <div class="proimg" v-if="choose.face != ''"><img :src="choose.face" /></div>
                            <div class="proimg" v-if="choose.face == ''">暂无照片</div>
                            <div class="proimg" v-if="choose.back != ''"><img :src="choose.back" /></div>
                            <div class="proimg" v-if="choose.back == ''">暂无照片</div>
                            <div class="proimg" v-if="choose.hand != ''"><img :src="choose.hand" /></div>
                            <div class="proimg" v-if="choose.hand == ''">暂无照片</div>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="seephotolog = false"  size="small">好的</el-button>
                    </span>
            </el-dialog>
        </div>
        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot
        },
        name: "personalCenter",
        data() {
            return {
                all:{},
                seller_memolist:[],
                loading:true,
                seephotolog:false,
                choose:{
                    face:"",
                    back:"",
                    hand:""
                },
                waitpic:false,
                seephotoloading:false
            }
        },
        created() {
            var that = this
            axios.get("/api/plan-market/order/detail?order_id="+this.$route.query.id)
                .then(function(response) {

                    if(response.data.msg.code == 0){
                        that.seller_memolist = response.data.data.seller_memo.split("</br>")
                        that.all = response.data.data
                        that.loading = false
                    }else{
                        if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                        that.$message.error(response.data.msg.info);
                    }
                })

        },
        mounted() {

        },
        methods: {
          jiemi:function(item,index){

            this.$set(this.all,'id_card_name',this.decrypt(this.all.encrypt_id_card_name))
            this.$set(this.all,'id_card_num',this.decrypt(this.all.encrypt_id_card_num))
            this.$set(this.all,'address_name',this.decrypt(this.all.encrypt_address_name))
            this.$set(this.all,'address_mobile',this.decrypt(this.all.encrypt_address_mobile))
            this.$set(this.all,'address',this.decrypt(this.all.encrypt_address))

            let address = this.decrypt(this.all.encrypt_address)
            let town = this.decrypt(this.all.town)

            if(address.includes(town)){
              this.$set(this.all,'town','')
            }
          },
            //查看照片
            seephoto:function(id_card_num,ordernum){
                //没加载之前
                this.seephotolog = true
                this.seephotoloading = true
                this.choose.face = ""
                this.choose.back = ""
                this.choose.hand = ""

                var that = this
                axios.get('/api/plan-market/order/photos/url?id_card_num='+id_card_num+'&id='+ordernum)
                    .then(response => {
                          if(response.data.msg.code != 0){
                             that.$message.error(response.data.msg.info);
                          }else{
                             var random = Math.random()
                             if( response.data.data.face_url != ''){that.choose.face = response.data.data.face_url + '?v='+ random}else{that.choose.face = ''}
                             if( response.data.data.back_url != ''){that.choose.back = response.data.data.back_url + '?v='+ random}else{that.choose.back = ''}
                             if( response.data.data.hand_url != ''){that.choose.hand = response.data.data.hand_url + '?v='+ random}else{that.choose.hand = ''}
                             that.seephotoloading = false
                          }
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mt20{margin-top: 20px;}
    .index{

                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}

            .logflex{ display: flex; justify-content: space-around; flex-wrap: wrap;
                .el-button--primary{
                    padding: 10px 30px;
                }
            }
            .logflex div{  width: 377px; text-align: center; }
            .logflex .proimg{ display: flex; justify-content: center; align-items: center; height: 265px; background: #EAEAEA;}
            .logflex .proimg img{ max-width: 100%; max-height: 100%;}
            .con{ padding: 20px 30px;

                .flex{ display: flex; line-height: 30px; margin-bottom: 10px;
                    .idnum{ font-size: 16px; color: #646464; font-weight: bold;}
                    .outnum{ margin-left: 30px; color: #646464; font-size: 14px;}
                    .dtime{ color: #B7B7B7; margin-right: 50px; font-size: 14px;}
                }
                .flexx{ border-top: 1px #B7B7B7 dashed;  border-bottom: 1px #B7B7B7 dashed; padding: 20px;
                    .flex2{ display: flex; flex-wrap: wrap; font-size: 14px; color: #646464;}
                    .detail{  color: #727272; min-width: 410px;}
                    .el-form-item{ margin-bottom: 0;}
                    .el-form-item__label{ line-height: 30px;}
                    .el-form-item__content{ line-height: 30px;}
                }
                .borx{ border: 1px #EAEAEA solid; margin-top: 20px; border-bottom: 0;
                    .flex2{ display: flex; flex-wrap: wrap; font-size: 14px; line-height: 40px; text-align: center;
                        .shop1{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop2{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop3{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop4{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop41{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop42{ flex: 1;  border-bottom: 1px #EAEAEA solid;}
                        .shop5{ flex: 1;  border-right: 1px #EAEAEA solid;  border-bottom: 1px #EAEAEA solid;}

                        .shop6{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop7{ flex: 1; border-right: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid;}
                        .shop8{ flex: 1;  border-bottom: 1px #EAEAEA solid;}
                        .shop01{flex: 1;}
                        .shop02{flex: 1;}
                        .shop03{flex: 1;}
                        .shop05{flex: 1;}
                        .shop06{flex: 1;}
                        .shop08{flex: 1;}
                        .shopb{border-bottom: 1px #EAEAEA solid;}
                    }
                }
                .mem{ margin-top: 20px;}
                .memtitle{ font-size: 16px; color: #646464; font-weight: bold; margin-bottom: 20px;}
                .memlist{ font-size: 14px; color: #727272; line-height: 40px;}

            }


    }
</style>
